﻿@model Lead2012.ViewModels.UserViewModel
@{
    ViewBag.Title = "Quản lý người dùng";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form method="post" class="form" id="viewUsers" action="##">
	<fieldset>
        <div id="apps" class="content" style="position: relative;">
            <h2 class="app">
                <span class="viewtitle"><strong>Quản lý người dùng</strong></span>
                <span class="right"><a href="/User/Add">Thêm mới &raquo;</a></span>
            </h2>          
            <div class="title nomargin">
                <span class="right-btns">
                    <input id="q" type="text" class="text spl search filter" data-bind="event: { keypress: RunSomethingKey }" autocomplete="off" placeholder="Từ khóa" />
                    <span class="v-line"></span>
                    <a href="javascript:void(0)" class="btn btn-go" data-bind="click: SearchButton">Go</a>
                </span>
                <h3>Xem danh mục</h3>
            </div>
            <span class="paging" data-bind="visible: ItemList().length>0">
                <span class="pageleft">
                    <span class="total" data-bind='text: PageText'></span>
                    <span class="show">Hiển thị <input type="text" class="text" id="PageSize" data-bind="value: PageSize" onkeypress="return isNumberKey(event)" /> trên trang <span class="smallText" data-bind="text: PageSizeText"></span></span>
                </span>
                <span class="pages">
                    <span class="smallText" data-bind="text: PageIndexText, visible: ItemList().length>0"></span> 
                    Trang <input type="text" class="text" id="PageIndex" data-bind="value: PageIndex" onkeypress="return isNumberKey(event)" /> của <span data-bind="text: TotalPage"></span>
                    <a href="javascript:void(0)" class="btn btn-prev-arrow" data-bind="click: PrevButton, attr: {'class': PrevButtonClass}"></a>                            
                    <a href="javascript:void(0)" class="btn btn-next-arrow" data-bind="click: NextButton, attr: {'class': NextButtonClass}"></a>
                </span>
            </span>


            <div class="linegroup" data-bind="visible: ItemList().length>0">        
                <table class="tablegrid" cellspacing="0" border="0">
                    <thead>
                        <tr class="title">                          
		                    <th>
                                <span class="w">
                                    <a href="javascript:void(0)" data-bind='click: function(event) { SetOrder(event, "Fullname")}'>Tên người dùng</a>
                                    <div class="sort_wrapper" id="Fullname">  
                                        <span class="grid_order ui_icon"></span>
                                    </div>               
                                </span>
                            </th>                     
		                    <th>
                                <span class="w">
                                    <a href="javascript:void(0)" data-bind='click: function(event) { SetOrder(event, "Username")}'>E-mail</a>
                                    <div class="sort_wrapper" id="Username">  
                                        <span class="grid_order ui_icon"></span>
                                    </div>               
                                </span>
                            </th>                    
		                    <th>
                                <span class="w">Vai trò</span>
                            </th>
		                    <th>
                                <span class="w">
                                    <a href="javascript:void(0)" data-bind='click: function(event) { SetOrder(event, "IsLockedOut")}'>Trạng thái</a>
                                    <div class="sort_wrapper" id="IsLockedOut">  
                                        <span class="grid_order ui_icon"></span>
                                    </div>               
                                </span>
                            </th>
                  
		                    <th class="last centeralign"><span class="w">Xóa</span></th>
                        </tr>
                      </thead>

                    <tbody data-bind="foreach: ItemList">
                        <tr class="line">
                            <td>
                                <span class="w">
                                    <a data-bind='text: Fullname, attr: {href: "/User/Edit/" + ID, title: Fullname}'>Edit</a>
                                </span>
                            </td>
                            <td>
                                <span class="w" data-bind='text: Username'></span>
                            </td>
                            <td>
                                <span class="w" data-bind='text: Comment'></span>
                            </td>
		                    <td>
                                <span class="w" data-bind="text: Active"></span>
                            </td>
		                    <td class="last centeralign">
                                <span class="w" data-bind='visible: Comment != "Administrator"'>
                                    <a class="btn btn-edit edit" href="javascript:void(0)" data-bind="attr:{href: '/User/Edit/' + ID}">Edit</a>
                                    <a class="btn btn-x delete" href="javascript:void(0)" data-bind='click:$parent.DeleteItems'>Delete</a>
                                </span>
                            </td>
	                    </tr>
                    </tbody>


                </table>
                @Html.Partial("PopupDelete")
            </div>
            
            <div class="linegroup" data-bind="visible: ItemList().length<=0" style="display:none">
                <span class="message">Không kết quả</span>
            </div>
        </div>
    </fieldset>
</form>
<script type="text/javascript">
    var data = @(Html.Raw(Json.Encode(Model)));
</script>
<script src="/Scripts/User/UserGrid.js" type="text/javascript"></script>
